<template>
	<view class="content">
		<view class="cont_item">
			<view class="item">
				<view class="title">选择币种</view>
				<view class="type">
					<text>{{type}}</text>
					<text @click="typeClick">选择币种</text>
				</view>
			</view>
		</view>
		<view class="code">
			<view class="qr_code">
				<canvas style="width: 150px;height: 150px;" canvas-id="couponQrcode"></canvas>
			</view>
			<view class="address">
				<view class="title">充币地址</view>
				<view class="url">{{url}}</view>
				<u-button :hair-line="btnBorder" class="copy" @click="copy">复制地址</u-button>
			</view>
		</view>
		<view class="tips">
			请勿向上述地址充值任何非TRC20_USDT资产，否则资产不可找回！
		</view>
		<!--币种弹窗-->
		<view :class="{active:show}" class="typeCont" @click.stop="close">
			<view class="type_cont"  @click.stop>
				<view class="cont">
					<view :class="{active:active==1}" @click="clickType(1)">
						<image src="../../static/icon/USDT.png" mode=""></image>
						<text>选择USDT币种</text>
					</view>
					<view :class="{active:active==2}" @click="clickType(2)">
						<image src="../../static/icon/USDT.png" mode=""></image>
						<text>选择BST币种</text>
					</view>
					<!-- <u-button 
					:hair-line="btnBorder" 
					class="submit" @click="typeSubmit">确定</u-button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('@/js_sdk/qrcode/weapp-qrcode.js')
	export default {
		data() {
			return {
				url:'',
				btnBorder:false,
				active:1,//币种分类
				show:false,//是否显示币种弹窗
				type:'USDT-TRC20',//币种
			}
		},
		onReady() {

		},
		onLoad() {
			// setTimeout(() => {
			// 	this.couponQrCode()
			// }, 50)
			this.getUserInfo()
		},
		methods: {
			//复制到剪切板
			copy(){
				uni.setClipboardData({
				    data: this.url,
				    success: function () {
				        //console.log('success');
				    }
				});
			},
			//选择币种
			clickType(e){
				this.active = e
				this.type = this.active==1?'USDT-TRC20':'BST'
				this.show = false
			},
			//币种确定
			typeSubmit(){
				this.type = this.active==1?'USDT-TRC20':'BST'
				this.show = false
			},
			//关闭
			close(){
				this.show = false
			},
			//点击选择币种
			typeClick(){
				this.show = true
			},
			// 二维码生成工具
			couponQrCode(e) {
				new qrCode('couponQrcode', {
					text: e,
					width: 150,
					height: 150,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						//console.log('成功返回---------',res)
						this.url = res.data.skaddress
						this.couponQrCode(res.data.skaddress)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.cont_item{
			padding-top: 12rpx;
			.item{
				padding: 0rpx 30rpx;
				.title{
					padding-top: 30rpx;
					font-size: 18px;
					color: #FFFFFF;
				}
				.type{
					color: #FFFFFF;
					padding: 24rpx 0;
					display: flex;
					justify-content: space-between;
					text:last-child{
						color:#5e69ff;
					}
				}
				border-bottom: 1px solid $border-bottom-color;
			}
		}
		.code{
			background-color: $border-bottom-color;
			margin: 40rpx 24rpx;
			border-radius: 15rpx;
			padding: 30rpx 0;
			text-align: center;
			color: #FFFFFF;
			.qr_code {
				width: 165px;
				height: 165px;
				display: flex;
				margin: 30rpx auto;
				align-items: center;
				justify-content: center;
				background-color: #FFFFFF;
			}
			.title{
				margin-top: 20rpx;
			}
			.copy{
				background-color: #5f6aff;
				color: #ffffff;
				margin-top: 20rpx;
				border-color: #5f6aff;
				width: 220rpx;
				margin: 20rpx auto;
			}
		}
		.tips{
			margin: 0 24rpx;
			font-size: 12px;
			color:#5f6aff;
			line-height: 48rpx;
			margin-top: 20rpx;
			letter-spacing: 1px;
		}
		.typeCont.active{
			bottom: 0;
		}
		.typeCont{
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			bottom:-100vh;
			transition: 0.35s;
			background-color: rgba(0,0,0,0.6);
			z-index: 999;
		}
		.type_cont{
			background: transparent url(../../static/bzbg.png)left center no-repeat;
			background-size: 100% 100%;
			width: 95%;
			height: 390rpx;
			position: absolute;
			left: 2.5%;
			bottom: 30rpx;
			z-index: 2;
			.cont{
				padding: 70rpx 70rpx 0 70rpx;
				>view{
					display: flex;
					padding: 8rpx 0;
					padding-left: 155rpx;
					align-items: center;
					margin-bottom: 10rpx;
					color: #FFFFFF;
					font-size: 14px;
					image{
						width: 60rpx;
						height: 60rpx;
						margin-right: 18rpx;
					}
				}
				.active{
					background-color: #4b4fcc;
					border-radius: 10rpx;
				}
				.submit{
					background-color: $border-bottom-color;
					color: #FFFFFF;
					border: transparent;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
